<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>田字格</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<style>
    #canvas{
        margin:0 auto;
        display: block;
    }
</style>
<body>
    <h1>田字格</h1>
    <canvas id="canvas">
        您的浏览器不支持canvas!
    </canvas>
    <div class="controller">
        <ul>
            <li><button class="red btn" color="red"></button></li>
            <li><button class="black btn" color="black"></button></li>
            <li><button class="yellow btn" color="yellow"></button></li>
            <li><button class="green btn" color="green"></button></li>
            <li><button class="purple btn" color="purple"></button></li>
        </ul>
        <button class="clear" id="clear">清除</button>
    </div>
    <script src="script.js"></script>
</body>
</html>